<!DOCTYPE html>
<html>
    <head>
		<title>视频监控</title>
		<meta http-equiv="Content-Type" content="text/html; charset=utf-8" />
		<meta http-equiv="Content-Language" content="zh-CN" />
		<meta http-equiv="Content-Script-Type" content="text/javascript" />
		<meta http-equiv="X-UA-Compatible" content="IE=edge,chrome=1" />
		<meta content="width=device-width,initial-scale=1.0,maximum-scale=1.0,user-scalable=no" name="viewport">
		<meta name="format-detection" content="telephone=no"/>
		<link rel="stylesheet" href="css/mui.min.css">
		<link rel="stylesheet" href="css/bootstrap.min.css">
		<link rel="stylesheet" type="text/css" href="css/index.css"/>
		<script src="js/jquery.min.js"></script>
		<script src="js/bootstrap.min.js"></script>	
		<style>
			.nav-tabs{background: #FFF;margin-top: 50px;padding-left: 15px;}
			.nav > li > a:focus, .nav > li > a:hover{background: #FFF;}
			.monitor_top{height:24px;padding: 0;}
			.monitor_left , .monitor_right{padding: 0;height:24px;line-height: 24px;bottom: 0;}
			.monitor_left{padding-left: 3px;}
			.monitor_right{right: 3px;text-align: right;}
			.title_top{text-align: center;}
			.rq{padding: 0;}
		</style>    
		<style type="text/css">
			.mui-preview-image.mui-fullscreen {
				position: fixed;
				z-index: 20;
				background-color: #000;
			}
			.mui-preview-header,
			.mui-preview-footer {
				position: absolute;
				width: 100%;
				left: 0;
				z-index: 10;
			}
			.mui-preview-header {
				height: 44px;
				top: 0;
			}
			.mui-preview-footer {
				height: 50px;
				bottom: 0px;
			}
			.mui-preview-header .mui-preview-indicator {
				display: block;
				line-height: 25px;
				color: #fff;
				text-align: center;
				margin: 15px auto 4;
				width: 70px;
				background-color: rgba(0, 0, 0, 0.4);
				border-radius: 12px;
				font-size: 16px;
			}
			.mui-preview-image {
				display: none;
				-webkit-animation-duration: 0.5s;
				animation-duration: 0.5s;
				-webkit-animation-fill-mode: both;
				animation-fill-mode: both;
			}
			.mui-preview-image.mui-preview-in {
				-webkit-animation-name: fadeIn;
				animation-name: fadeIn;
			}
			.mui-preview-image.mui-preview-out {
				background: none;
				-webkit-animation-name: fadeOut;
				animation-name: fadeOut;
			}
			.mui-preview-image.mui-preview-out .mui-preview-header,
			.mui-preview-image.mui-preview-out .mui-preview-footer {
				display: none;
			}
			.mui-zoom-scroller {
				position: absolute;
				display: -webkit-box;
				display: -webkit-flex;
				display: flex;
				-webkit-box-align: center;
				-webkit-align-items: center;
				align-items: center;
				-webkit-box-pack: center;
				-webkit-justify-content: center;
				justify-content: center;
				left: 0;
				right: 0;
				bottom: 0;
				top: 0;
				width: 100%;
				height: 100%;
				margin: 0;
				-webkit-backface-visibility: hidden;
			}
			.mui-zoom {
				-webkit-transform-style: preserve-3d;
				transform-style: preserve-3d;
			}
			.mui-slider .mui-slider-group .mui-slider-item img {
				width: auto;
				height: auto;
				max-width: 100%;
				max-height: 100%;
			}
			.mui-android-4-1 .mui-slider .mui-slider-group .mui-slider-item img {
				width: 100%;
			}
			.mui-android-4-1 .mui-slider.mui-preview-image .mui-slider-group .mui-slider-item {
				display: inline-table;
			}
			.mui-android-4-1 .mui-slider.mui-preview-image .mui-zoom-scroller img {
				display: table-cell;
				vertical-align: middle;
			}
			.mui-preview-loading {
				position: absolute;
				width: 100%;
				height: 100%;
				top: 0;
				left: 0;
				display: none;
			}
			.mui-preview-loading.mui-active {
				display: block;
			}
			.mui-preview-loading .mui-spinner-white {
				position: absolute;
				top: 50%;
				left: 50%;
				margin-left: -25px;
				margin-top: -25px;
				height: 50px;
				width: 50px;
			}
			.mui-preview-image img.mui-transitioning {
				-webkit-transition: -webkit-transform 0.5s ease, opacity 0.5s ease;
				transition: transform 0.5s ease, opacity 0.5s ease;
			}
			@-webkit-keyframes fadeIn {
				0% {
					opacity: 0;
				}
				100% {
					opacity: 1;
				}
			}
			@keyframes fadeIn {
				0% {
					opacity: 0;
				}
				100% {
					opacity: 1;
				}
			}
			@-webkit-keyframes fadeOut {
				0% {
					opacity: 1;
				}
				100% {
					opacity: 0;
				}
			}
			@keyframes fadeOut {
				0% {
					opacity: 1;
				}
				100% {
					opacity: 0;
				}
			}
			p img {
				max-width: 100%;
				height: auto;
			}
			.monitor_img{
				width: 100%;
				height: 100px;
				padding: 0;
				margin: 0;
			}
			.mui-content-padded{
				margin: 0;
				padding: 0;
			}
		</style>
    </head>
	<body class="">
		<div class="col-xs-12 title_top">
			<div class="col-xs-3 rq back">
				<a href="#">
					<div style="float: left;"><img src="images/icon_left.png"/></div>
				</a>
			</div>
			<div class="col-xs-6">视频监控</div>
			<div class="col-xs-3" style="padding-right: 0;">
				<div class="shaixuan">	
					<img src="images/icon_shaixuan.png"/> 
					<div class="cat">筛选</div> 
				</div>
			</div>
		</div>
		<ul class="col-xs-12 nav nav-tabs">
			<li class="active col-xs-6">
				<a href="#one" data-toggle="tab">
					实时监控
				</a>
			</li>
			<li class="col-xs-6">
				<a href="#two" data-toggle="tab">
					抓拍记录
				</a>					
			</li>
		</ul>
		<div id="myTabContent" class="col-xs-12 tab-content">
			<div class="tab-pane fade in active col-xs-12 " id="one">
				<div class="col-xs-12 monitor video_lists">
					
				</div>
			</div>
			<div class="tab-pane fade col-xs-12" id="two">	
				<div class="col-xs-12 monitor environment_lists">
					
				</div>
			</div>
		</div>
	</body>
</html>
<script src="js/mui.min.js"></script>
<script src="js/project.config.js"></script>
<script src="js/mui.previewimage.js"></script>
<script src="js/mui.zoom.js"></script>
<script src="js/jquery.min.js"></script>
<script >
	mui.init({
	  gestureConfig:{
	    longtap: true, //默认为false
	    release:true
	   }
	});
	mui.plusReady(function () {
		var token = get_token();
		var params = get_ws();
		if(!params.projectID){
			_mui_dialog._toast('请勿非法访问');
			return false;
		}
		//实时监控
		var data = {};
		data.api = 'video-get-device-info';
		data.token = token;
		data.projectID = params.projectID;
		mui.ajax(project_cofnig.service_url, {
				async: true,
				dataType: 'json',
				data: data,
				success: function (ref) {
					if(ref.code == 0){
						var _html = '';
						mui.each(ref.data.videos,function(i,v){
							_html += '<div class="col-xs-6">';
							_html += '<img class="monitor_img" src="'+v.pictureUrl+'" data-realplayurl="'+v.realPlayUrl+'"  data-name="'+v.name+'" />';
							_html += '<p class="monitor_text">'+v.name+'</p>';
							_html += '</div>';
						});
						$(".video_lists").html(_html);
					}
				}
		});
		//抓拍记录
		var data = {};
		data.api = 'environment-get-picture-event';
		data.token = token;
		data.projectID = params.projectID;
		data.justCount = 0;
		data.curPage = 1;
		data.pageSize = 10;
		mui.ajax(project_cofnig.service_url, {
				async: false,
				dataType: 'json',
				data: data,
				success: function (ref) {
					if(ref.code == 0){
						var _html = '';
						mui.each(ref.data.pictureEvent,function(i,v){
							var data = {
								start_time:v.startTime,
								end_time:v.endTime,
							}
							var startTime = endTime = '';
							mui.ajax(project_cofnig.service_dec, {
								async: false,
								dataType: 'json',
								data: data,
								success: function (ref) {
									startTime = ref.start_time;
									endTime = ref.end_time;
								}
							});
							_html += '<div class="col-xs-6 environment">';
							_html += '<div class="col-xs-12 monitors" >';
							_html += '<div class="mui-content-padded" >';
							_html += '<img class="monitor_img" data-preview-src="" data-preview-group="1" src="'+v.smallPicUrl+'" bigimg="'+v.bigPicUrl+'" aa="vvvv" />';
							_html += '</div>';
							_html += '<div class="col-xs-12 monitor_top"></div>';
							_html += '<div class="col-xs-6 monitor_left">'+v.videoName+'</div>';
							_html += '<div class="col-xs-6 monitor_right">'+startTime+'</div>';
							_html += '</div>';
							_html += '<p class="col-xs-12 monitor_text">'+v.eventName+'</p>';
							_html += '</div>';
						});
						$(".environment_lists").html(_html);
					}
				}
		});
		mui(".title_top").on("tap",".back",function(){
			mui.back();
		});
		mui(".environment").on("tap",".monitors",function(){
		     mui.previewImage();
		});
		mui(".video_lists").on('tap','.monitor_img',function(){
			var _this = $(this);
			var _this_realPlayUrl = _this.data('realplayurl');
			var _this_name = _this.data('name');
			redirect('realplay.html',{
				realPlayUrl:_this_realPlayUrl,
				projectID:params.projectID,
				name:_this_name,
			});
		});
		document.addEventListener("longtap", function(event) {
		    var name = event.target.tagName;
		    var src = event.target.src;
		    var bigimg = '';
		    if(name === "IMG") {
		    	$(".mui-content-padded img").each(function(i,v){
		    		if($(this).attr('src') == src){
		    			bigimg = $(this).attr('bigimg')
		    		}
		    	});
		       var downLoader = plus.downloader.createDownload(bigimg, {
				    method: 'GET',
				    filename: '_downloads/image/zhgd' 
				}, function(download, status) {
				    var fileName = download.filename;
				    //console.log('文件名:' + fileName);
				    //console.log('下载状态：' + status);
				});
				downLoader.start();
				plus.gallery.save(bigimg, function() {
					_mui_dialog._confirm('打开相册查看原图','',["确定", "取消"],function(event){
						var gindex = event.index;
				        if(gindex == 0) {
				            plus.gallery.pick(function(file) {
				                mui.toast("你选择了图片：" + file);
				            }, function(error) {
				               // console.log(error);
				            }, {
				                filter: 'image'
				            });
				        }  
					});
				});
		    }
		});
	});
</script>